<template>
    <div class="zw-select-label-form" >
        <el-select v-model="labelType" placeholder="请选择" clearable @change="handleClearTags" >
            <el-option v-for="item in SELECT_LABEL_TYPE" v-show="!exclude.includes(item.value)" :label="item.label" :value="item.value" />
        </el-select>
        <template v-if="props.type && ![5, 6].includes(props.type)">
            <el-button plain @click="handleOpenSelectLabel">
                选择标签
            </el-button>
            <div v-show="props.tags.length">
                已选择标签 <span>{{ props.tags.length }}</span> 个
            </div>
            <RenderTags v-model:tags="labelTags" @open-more="handleOpenSelectLabel" @close="onClose" />
        </template>
        <ZWSelectLabel v-model="labelVisiable" ref="zwSelectLabelRef" @submit="handleSelectLabelSubmit" />
    </div>
</template>

<script lang="ts" setup>
import { computed, ref } from "vue";
import ZWSelectLabel from "./ZWSelectLabel.vue";
import RenderTags from "./ZWRenderTags.vue";

import { SELECT_LABEL_TYPE } from '@renderer/enums/common'
const props = defineProps({
    type: {
        type: Number,
    },
    tags: {
        type: Array,
        default: () => [],
    },
    /**
     * 排除的标签选择
     */
    exclude: {
        type: Array,
        default: () => [],
    }
});

const labelType = computed({
    get() {
        return props.type;
    },
    set(val) {
        emit("update:type", val);
    },
});

const labelTags = computed({
    get() {
        return props.tags;
    },
    set(val) {
        emit("update:tags", val);
    },
});


const emit = defineEmits(["update:type", 'update:tags', 'submitAfter', 'close'])

/* ----------------------------标签-start---------------------------- */
const labelVisiable = ref(false);
/** 选择标签弹窗示例 */
const zwSelectLabelRef = ref();
/**
 * 打开标签弹窗
 */
const handleOpenSelectLabel = () => {
    zwSelectLabelRef.value.open(props.tags);
};

const onClose = () => {
    emit('close')
}

const handleSelectLabelSubmit = (selectTags) => {
    emit('update:tags', [...selectTags])
    emit('submitAfter')
};
/* ----------------------------标签-end---------------------------- */

const handleClearTags = () => {
    emit('update:tags', [])
}

</script>

<style lang="scss" scoped>
.zw-select-label-form {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}
</style>